<template>
  <!--    文本框组件   onselectstart 方式选中-->
  <div style="overflow:hidden" onselectstart="return flase">
    <a :href="config.isLink?config.link:'javascript:void(0);'" :style="textStyle"
       :ref="config.id"
       :class="config.lamp? config.reverse ? 'text_animation' : 'text_animation1':''"
       v-html="textContent"></a>

  </div>

</template>

<script>
import {computed,onMounted,watch,ref} from 'vue'
import moment from 'moment'
export default {
  name: 'text',
  props: {
    config: {
      type: Object
    },
    editor: {
      type: Object
    },
    id: {
      type: String
    }
  },
  setup(props){
    const textStyle = computed(() =>{
      let styleObj = {
        'font-size': `${props.config.fontSize}px`,
        'color': props.config.color,
        'letter-spacing': `${props.config.spacing}px`,
        'text-align': props.config.align,
        'font-weight': props.config.weight,
        'display': 'block',
        'width': `${props.editor.width}px`,
        'height': `${props.editor.height}px`,
        'line-height': `${props.editor.height}px`,
        'backgroundColor': props.config.backgroundColor,
        'animation-iteration-count': 'infinite',
        'animation-timing-function': 'cubic-bezier(0, 0, 1, 1)'
      }
      if (props.config.style && props.config.style.trim()) {
        let styleArr = props.config.style.split(';')
        styleArr.forEach(element => {
          var map = element.split(':')
          styleObj[map[0]] = map[1]
        })
      }
      if (props.config.lamp) {
        styleObj['animation-duration'] = `${props.config.speed}s`
      }
      return styleObj
    })
    let intervalObj = null;
    const textContent = ref(props.config.context)
    watch(()=>{
      return props.config.context
    },(val)=>{
      textContent.value = val
    })
        // 时间格式化
    const dateFormat = ()=> {
      // 如果时间格式为E 需要手动转换时间格式
      if (props.config.dateformat === 'E') {
        let week = moment().format(props.config.dateformat)
        let weekStr
        switch (week) {
          case '1':
            weekStr = '星期一'
            break
          case '2':
            weekStr = '星期二'
            break
          case '3':
            weekStr = '星期三'
            break
          case '4':
            weekStr = '星期四'
            break
          case '5':
            weekStr = '星期五'
            break
          case '6':
            weekStr = '星期六'
            break
          case '7':
            weekStr = '星期日'
            break
        }
        textContent.value = weekStr
        return
      }
      textContent.value = moment().format(props.config.dateformat)
    }
    /**
     * 初始化数据格式
     */
    const init = () => {
      if (props.config.dateflag) {
        dateFormat()
        intervalObj = setInterval(dateFormat, 1000)
      }
    }
    onMounted(()=>{
      init()
    })
    return {
      textStyle,
      textContent
    }
  }
}
</script>

<style scoped>
@keyframes lefttoright {
  0% {
    margin-left: -100%
  }
  100% {
    margin-left: 100%
  }
}

@keyframes righttoleft {
  0% {
    margin-left: 100%
  }
  100% {
    margin-left: -100%
  }
}

.text_animation {
  animation-name: lefttoright;
}

.text_animation1 {
  animation-name: righttoleft;
}
</style>
